<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/zxl/payment.css">
    <title>付款记录</title>
</head>
<body>

<div id="wrapper">
    <div id="sidebar">
        <p style="color: #67ffd9">小达财务系统</p>
        <a href="AllView" class="nav-link">出库总数据</a>
        <a href="inventory" class="nav-link">提货记录</a>
        <a href="payment" class="nav-link active">付款记录</a>
        <button class="nav-link" onclick="quit()">退出系统</button>
        <br>
        <button id="refreshButton" class="nav-link">切换壁纸</button>
        <script>
            // 等待DOM加载完成后再执行JavaScript代码
            document.addEventListener('DOMContentLoaded', function () {
                // 获取按钮元素
                var button = document.getElementById('refreshButton');

                // 为按钮添加点击事件监听器
                button.addEventListener('click', function() {
                    // 刷新页面（强制从服务器重新加载）
                    location.reload(true);
                });
            });
        </script>
    </div>

    <script>
        function quit() {
            Swal.fire({
                title: '确定要退出系统吗？',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href ="/";
                }
            })
        }
    </script>

    <div id="content">
        <h1>付款信息数据</h1>
        <button class="download-btn" onclick="downloadFile()">导出到excel</button>
        <script>
            function downloadFile() {
                const url = '/Excelpayment'; // 替换为实际下载地址
                const aLink = document.createElement('a');
                aLink.href = url;
                aLink.download = '';
                aLink.click();
            }
        </script>
        <link rel="stylesheet" href="/css/all.css">
        <table border="1" id="dataTable">
            <thead>
            <tr>
                <th data-title="产品ID">ID</th>
                <th data-title="产品">产品</th>
                <th data-title="购买者">购买者</th>
                <th data-title="购买数量">购买数量</th>
                <th data-title="单价">单价</th>
                <th data-title="总价">总价</th>
                <th data-title="已付款">已付款</th>
                <th data-title="欠款">欠款</th>
                <th data-title="操作员工">操作员工</th>
                <th data-title="存款卡号">存款卡号</th>
                <th data-title="刷卡金额">刷卡金额</th>
                <th data-title="备注">备注</th>
                <th data-title="创建时间">创建时间</th>
                <th data-title="更新时间">更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <script src="/js/sweetalert2@10.js"></script>
        <script src="/js/jquery-3.6.4.min.js"></script>
        <script>
            function updateTable(data) {
                $('#dataTable tbody').empty();
                var rows = data.map(function (item) {
                    return '<tr>' +
                        '<td>' + item.product_id + '</td>' +
                        '<td>' + item.product + '</td>' +
                        '<td>' + item.name + '</td>' +
                        '<td>' + item.quantity + '</td>' +
                        '<td>' + item.price + '</td>' +
                        '<td>' + item.total_prices + '</td>' +
                        '<td>' + item.payment + '</td>' +
                        '<td>' + item.debt + '</td>' +
                        '<td>' + item.staff + '</td>' +
                        '<td>' + item.cark + '</td>' +
                        '<td>' + item.swiping_card + '</td>' +
                        '<td>' + item.remark + '</td>' +
                        '<td>' + item.create_time + '</td>' +
                        '<td>' + item.up_data + '</td>' +
                        '<td>' +
                        '<button onclick="addRow()">添加</button>' +
                        '<button onclick="updateRow(' + item.product_id + ')">更改</button>' +
                        '<button onclick="deleteRow(' + item.product_id + ')">删除</button>' +
                        '</td>' +
                        '</tr>';
                }).join('');

                $('#dataTable tbody').append(rows);
            }

            function fetchData() {
                $.ajax({
                    url: '/all',
                    method: 'GET',
                    dataType: 'json',
                    async: true,
                    success: function (data) {
                        updateTable(data);
                    },
                    error: function (error) {
                        console.error('获取数据时发生错误:', error);
                    }
                });
            }
            // 每500毫秒刷新一次数据
            setInterval(function () {
                fetchData();
            }, 1000);

            /**
             * 新增的逻辑请求
             */
            function addRow() {
                var url = 'addview_payment';
                var width = 550;
                var height = 880;
// 计算居中位置
                var left = (window.innerWidth - width) / 2 + window.screenX;
                var top = (window.innerHeight - height) / 2 + window.screenY;
// 在新窗口中打开网页
                window.open(url, '_blank', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left);

            }

            /**
             * 删除的逻辑请求
             * @param product_id
             */
            function deleteRow(product_id) {
                var confirmDelete = confirm("确认删除该行数据吗？");
                if (confirmDelete) {
                    $.ajax({
                        url: '/delete',
                        method: 'POST',
                        data: {product_id: product_id}, // 直接传递product_id
                        success: function (response) {
                            showNotification('success', response);
                            fetchData();
                        },
                        error: function (error) {
                            console.error('删除数据时发生错误:', error);
                        }
                    });
                }
            }


            /**
             * 改的逻辑请求
             * @param productId
             */

            function updateRow(productId) {
                var newName = prompt("请输入新的产品名称", "");
                if (newName !== null) {
                    var updatedData = {
                        product_id: productId,
                        product: newName
                        // 其他属性...
                    };

                    $.ajax({
                        url: '/update',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(updatedData),
                        success: function (response) {
                            showNotification('success', response);
                            fetchData();
                        },
                        error: function (error) {
                            console.error('更新数据时发生错误:', error);
                        }
                    });
                }
            }

            /**
             * 动画
             * @param icon
             * @param message
             */
            function showNotification(icon, message) {
                Swal.fire({
                    icon: icon,
                    title: message,
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        </script>
    </div>
</div>

<!--分页-->
<link rel="stylesheet" href="/css/zxl/paging.css">
<div class="pagination_p">
    <a href="#"><< Previous</a>
    <a href="#" title="Algorithm">1</a>
    <a href="#" title="DataStructure">2</a>
    <a href="#" title="Languages">3</a>
    <a href="#" title="Interview" class="active">4</a>
    <a href="#" title="practice">5</a>
    <a href="#">Next >></a>
</div>
</body>
</html>
